<template>
    <div class="collapse-container">
        <el-collapse v-model="activeNames" @change="handleChange" style="margin-bottom:10px">
            <el-collapse-item v-for="(item, index) in collapeses" :title="item.title" :name="item.name" :key="item.id">
                <el-form :model="item.configForm" style="padding:0 10px">
                    <el-form-item label="意图识别观众评论内容">
                        <el-input size="small" v-model="item.configForm.comment"></el-input>
                    </el-form-item>
                    <el-form-item label="语音回复内容">
                        <el-input size="small" v-model="item.configForm.voiceResponse"></el-input>
                    </el-form-item>
                    <el-form-item label="上传素材">
                        <el-upload>
                            <el-button type="primary" size="small">上传素材</el-button>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
        </el-collapse>
        <el-row style="margin-top:20px">
            <el-button type="primary" size="small" @click="addCollapes">新增内容</el-button>
        </el-row>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const activeNames = ref(['1'])
const collapeses = ref([
    {
        title: "意图识别",
        name: "1",
        configForm: {
            commentContent: "",
            voiceResponse: "",
        },
    },
]);

const addCollapes = () => {
    collapeses.value.push({
        title: "意图识别",
        name: collapeses.length + 1 + '',
        configForm: {
            commentContent: "",
            voiceResponse: "",
        },
    });
}
</script>

<style lang="less" scoped>
.collapse-container {
    :deep(.el-form-item__label) {
        color: #000!important;
    }
}
</style>
